<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增商品信息')" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-shangpinxinxiTest-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label">商品名称：</label>
                <div class="col-sm-8">
                    <input name="shangpinName" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">进货厂商：</label>
                <div class="col-sm-8">
                    <input name="jinhuoChangshang" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">商品类别：</label>
                <div class="col-sm-8">
                    <select name="shangpinLeibie" class="form-control" >
                        <option onclick="leibieSet(this.value)" value="整套门">整套门</option>
                        <option onclick="leibieSet(this.value)" value="防火门（门扇）">门扇</option>
                        <option  onclick="leibieSet(this.value)" value="防火门（门框）">门框</option>
                        <option  onclick="leibieSet(this.value)" value="双开防火门（左扇）">双开门左扇</option>
                        <option  onclick="leibieSet(this.value)" value="双开防火门（右扇）">双开门右扇</option>
                        <option onclick="leibieSet(this.value)"  value="防火锁">防火锁</option>
                        <option  onclick="leibieSet(this.value)" value="闭门器">闭门器</option>
                        <option  onclick="leibieSet(this.value)" value="拉爆盖">拉爆盖</option>
                    </select>
                    <script type="text/javascript">
                        function leibieSet(value) {
                            var guige = document.getElementById("leibieSet")
                            switch (value) {
                                case "整套门":
                                    guige.hidden = false
                                    break
                                case "防火门（门扇）":
                                    guige.hidden = false
                                    break
                                case "防火门（门框）":
                                    guige.hidden = false
                                    break
                                case "双开防火门（左扇）":
                                    guige.hidden = false
                                    break
                                case "双开防火门（右扇）":
                                    guige.hidden = false
                                    break
                                case "防火锁":
                                    guige.hidden = true
                                    break
                                case "闭门器":
                                    guige.hidden = true
                                    break
                                case "拉爆盖":
                                    guige.hidden = true
                                    break
                                default:
                                    break
                            }
                        }
                    </script>
                </div>
            </div>
            <div id="leibieSet">
            <div class="form-group">    
                <label class="col-sm-3 control-label">规格宽：</label>
                <div class="col-sm-8">
                    <input name="GuiGeKuan" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">规格高：</label>
                <div class="col-sm-8">
                    <input name="GuiGeGao" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">开向：</label>
                <div class="col-sm-8">
                    <input name="KaiXiang" class="form-control" type="text">
                </div>
            </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">进货价：</label>
                <div class="col-sm-8">
                    <input name="jinhuoJia" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">商品售价：</label>
                <div class="col-sm-8">
                    <input name="shangpinShoujia" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-8">
                    <input name="beizhu" class="form-control" type="text">
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <script th:inline="javascript">
        var prefix = ctx + "shangpinxinxi/shangpinxinxiTest"
        $("#form-shangpinxinxiTest-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-shangpinxinxiTest-add').serialize());
            }
        }
        // $(".file-upload").fileinput({
        //     uploadUrl: ctx + 'common/upload',
        //     maxFileCount: 1,
        //     autoReplace: true
        // }).on('fileuploaded', function (event, data, previewId, index) {
        //     $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
        // }).on('fileremoved', function (event, id, index) {
        //     $("input[name='" + event.currentTarget.id + "']").val('')
        // })
    </script>
</body>
</html>